import { RepoLink, Link } from '@brillout/docpress'

Instead of using relative import paths, which can be cumbersome, you can use path aliases. For example:

```js
import { Counter } from '../../../../components/Counter'// [!code --]
import { Counter } from '#root/components/Counter'// [!code ++]
```

> We recommend following [the Node.js convention](https://nodejs.org/api/packages.html#subpath-imports:~:text=must%20always%20start%20with%20%23%20to%20ensure%20they%20are%20disambiguated%20from%20external%20package%20specifiers) to always prefix path aliases with the special character `#`.

If you use **JavaScript**, define your path aliases at:
- <Link href="#vite-config-js">`vite.config.ts` > `resolve.alias`</Link>

If you use **TypeScript**, you must define your path aliases also at:
- <Link href="#tsconfig-json">`tsconfig.json` > `compilerOptions.paths`</Link>
  > You must define them twice — inside `vite.config.js` *and* `tsconfig.json`. (It's temporary: [Vite will soon support path aliases set in `tsconfig.json`](https://github.com/vikejs/vike/issues/1547#issuecomment-3085232187).)

If you use a custom server integration (**you don't use `vike-photon`**), also define them at:
- <Link href="#package-json">`package.json` > `imports`</Link>


## `vite.config.js`

```ts
// vite.config.ts

import type { UserConfig } from 'vite'

export default {
  resolve: {
    alias: {
     "#root": __dirname,
    }
  }
} satisfies UserConfig
```

See also:
 - [Vite > `resolve.alias`](https://vitejs.dev/config/shared-options.html#resolve-alias)

> The Vite config `resolve.alias` only applies to files that are processed by Vite.
>
> The following are processed by Vite:
> - All client-side code.
> - All <Link href="/config#files">`+` files</Link> loaded at runtime (client or server).
> - Your server code if you use <Link href="/vike-photon">`vike-photon`</Link>.
>
> Config files, such as `vite.config.js` or `+config.js` aren't processed by Vite. See <Link href="#config-files" />.


## `tsconfig.json`

If you use TypeScript, then TypeScript needs to know about your path aliases.

```json
// tsconfig.json

{
  "compilerOptions": {
    "paths": {
      "#root/*": ["./*"]
    }
  }
}
```

See also:
 - [TypeScript > `tsconfig.json#compilerOptions.paths`](https://www.typescriptlang.org/tsconfig#paths)


## `package.json`

If you use a JavaScript server, with a <Link href="/server-integration#manual-integration">custom integration</Link> instead of using <Link href="/vike-photon">`vike-photon`</Link>, then also define your path aliases at:

```json
// package.json

{
  "imports": {
    // JavaScript:
    "#root/*": "./*.js",
    // TypeScript:
    "#root/*": "./*.ts"
  }
}
```

This tells Node.js how to resolve path aliases (Node.js doesn't know about `vite.config.js`).

See also:
 - [NodeJS > Subpath imports](https://nodejs.org/api/packages.html#subpath-imports)

> If you use <Link href="/vike-photon">`vike-photon`</Link>, all your server code is transpiled by Vite. Defining path aliases at `vite.config.js` is enough because Vite already resolves all path aliases and Node.js doesn't see any path alias.
>
> If you don't use `vike-photon`, your server code isn't processed by [Vite](https://vite.dev) out of the box. Instead, Node.js directly executes your server code and, therefore, you must configure Node.js to resolve your path aliases. See also: [#562 - Transpile server code](https://github.com/vikejs/vike/issues/562).

> Alternatively, instead of using Node.js's built-in support over `package.json#imports`, you can use an npm package such as [`module-alias`](https://github.com/ilearnio/module-alias).


## Config files


To make path aliases work in config files, such as  `+config.js` and `vite.config.js`, define them at `tsconfig.json` or `package.json` (defining them in `vite.config.js` doesn't work for config files).

> Config files are transpiled by [esbuild](https://esbuild.github.io) instead of Vite — esbuild supports path aliases defined over `tsconfig.json` and `package.json` (esbuild doesn't know about `vite.config.js`).
